<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Element 风格在线聊天</title>
    <!-- 引入 Element UI 样式（核心：复用其设计风格） -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 jQuery 和 Element UI 脚本（仅用于样式复用，未使用组件） -->
    <script src="js/jquery.min.js"></script>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        /* 全局样式：贴合 Element 浅灰底色、统一字体 */
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            color: #303133;
        }

        /* 聊天容器：圆角、阴影、白色背景（Element 卡片风格） */
        #chat-container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        /* 标题栏：Element 标题样式 */
        .chat-header {
            padding: 16px 20px;
            border-bottom: 1px solid #eaecef;
            background-color: #fff;
            font-size: 18px;
            font-weight: 500;
            color: #1f2329;
        }

        /* 消息区域：Element 文本域风格 */
        .message-area {
            padding: 20px;
        }
        #textarea {
            width: 100%;
            height: 300px;
            padding: 12px 15px;
            border: 1px solid #dcdfe6;
            border-radius: 6px;
            background-color: #fff;
            font-size: 14px;
            line-height: 1.5;
            color: #303133;
            resize: none;
            box-sizing: border-box;
            transition: border-color 0.2s;
        }
        #textarea:focus {
            outline: none;
            border-color: #409eff; /* Element 主色调：蓝色 */
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }

        /* 表单区域：Element 表单布局风格 */
        .form-area {
            padding: 0 20px 20px;
        }
        .el-form-item {
            margin-bottom: 16px;
        }
        .el-form-item__label {
            display: inline-block;
            width: 80px;
            text-align: right;
            margin-right: 12px;
            font-size: 14px;
            color: #606266;
        }
        .el-input {
            display: inline-block;
            width: calc(100% - 100px);
        }
        .el-input__inner {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #dcdfe6;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.2s;
        }
        .el-input__inner:focus {
            outline: none;
            border-color: #409eff;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
        }

        /* 按钮：Element 按钮风格（区分主次按钮） */
        .el-button {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        /* 加入按钮：Element 成功色（绿色） */
        .el-button--success {
            background-color: #67c23a;
            color: #fff;
        }
        .el-button--success:hover {
            background-color: #52c41a;
        }
        /* 离开按钮：Element 危险色（红色） */
        .el-button--danger {
            background-color: #f56c6c;
            color: #fff;
        }
        .el-button--danger:hover {
            background-color: #e64949;
        }
        /* 发送按钮：Element 主色（蓝色） */
        .el-button--primary {
            background-color: #409eff;
            color: #fff;
        }
        .el-button--primary:hover {
            background-color: #3399ff;
        }

        /* 按钮间距 */
        .button-group {
            margin-left: 92px; /* 对齐标签宽度 */
        }
        .button-group .el-button {
            margin-right: 12px;
        }
    </style>
</head>
<body>
<div id="chat-container">
    <!-- 标题栏 -->
    <div class="chat-header">在线聊天</div>

    <!-- 消息显示区域 -->
    <div class="message-area">
        <textarea id="textarea" disabled placeholder="等待连接聊天室..."></textarea>
    </div>

    <!-- 表单区域（用户信息 + 操作按钮） -->
    <div class="form-area">
        <!-- Token -->
        <div class="el-form-item">
            <label class="el-form-item__label">Token：</label>
            <div class="el-input">
                <input type="text" id="token" class="el-input__inner" placeholder="输入认证Token（必填）">
            </div>
        </div>

        <!-- 接收方ID -->
        <div class="el-form-item">
            <label class="el-form-item__label">接收ID：</label>
            <div class="el-input">
                <input type="text" id="toId" class="el-input__inner" placeholder="输入接收方ID（群发可留空）">
            </div>
        </div>

        <!-- 自身ID -->
        <div class="el-form-item">
            <label class="el-form-item__label">你的ID：</label>
            <div class="el-input">
                <input type="text" id="id" class="el-input__inner" placeholder="输入你的唯一ID（必填）">
            </div>
        </div>

        <!-- 用户名 -->
        <div class="el-form-item">
            <label class="el-form-item__label">用户名：</label>
            <div class="el-input">
                <input type="text" id="userName" class="el-input__inner" placeholder="输入你的昵称（必填）">
            </div>
        </div>

        <!-- 头像URL -->
        <div class="el-form-item">
            <label class="el-form-item__label">头像URL：</label>
            <div class="el-input">
                <input type="text" id="headImg" class="el-input__inner" placeholder="输入头像图片URL（可选）">
            </div>
        </div>

        <!-- 加入/离开按钮组 -->
        <div class="button-group">
            <button id="join" class="el-button el-button--success">加入聊天室</button>
            <button id="out" class="el-button el-button--danger">离开聊天室</button>
        </div>

        <!-- 消息输入 + 发送按钮 -->
        <div class="el-form-item" style="margin-top: 24px;">
            <label class="el-form-item__label">发送消息：</label>
            <div class="el-input" style="display: inline-block; width: calc(100% - 200px);">
                <input type="text" id="message" class="el-input__inner" placeholder="输入消息内容（回车可快捷发送）">
            </div>
            <button id="send" class="el-button el-button--primary" style="margin-left: 12px;">发送</button>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        let url = "ws://localhost:8090/api/chat/";
        let ws = null;
        let userId = 0; // 存储当前用户ID
        const textarea = document.getElementById('textarea');
        const messageInput = $("#message");

        // 1. 加入聊天室
        $("#join").click(function(){
            const userName = $("#userName").val().trim();
            const selfId = $("#id").val().trim();
            const token = $("#token").val().trim();

            // 表单验证（贴合 Element 交互逻辑）
            if (!token) {
                alert("请输入认证Token！");
                $("#token").focus();
                return;
            }

            if (!selfId) {
                alert("请输入你的唯一ID！");
                $("#id").focus();
                return;
            }
            if (!userName) {
                alert("请输入你的用户名！");
                $("#userName").focus();
                return;
            }

            // 连接WebSocket (带token参数)
            const newUrl = url + selfId + "?token=" + token;
            userId = selfId;
            console.info("连接地址：", newUrl);

            ws = new WebSocket(newUrl);

            // 连接成功
            ws.onopen = function(){
                console.info("连接成功");
                textarea.append(`[系统通知] ${new Date().toLocaleString()}：你已加入聊天室\n`);
                textarea.scrollTop = textarea.scrollHeight;
                // 按钮状态切换
                $("#join").prop("disabled", true).css("opacity", 0.6);
                $("#out").prop("disabled", false).css("opacity", 1);
                messageInput.focus();
            }

            // 接收消息
            ws.onmessage = function(result){
                console.info("收到消息：", result);
                const message = JSON.parse(result.data);
                // 格式化消息显示（区分自己和他人消息）
                const sender = message.fromId === userId ? "我" : message.name || message.fromId;
                textarea.append(`[${message.time}] ${sender}：${message.msg}\n`);
                textarea.scrollTop = textarea.scrollHeight;
            }

            // 连接关闭
            ws.onclose = function(){
                textarea.append(`[系统通知] ${new Date().toLocaleString()}：你已离开聊天室\n`);
                textarea.scrollTop = textarea.scrollHeight;
                // 按钮状态重置
                $("#join").prop("disabled", false).css("opacity", 1);
                $("#out").prop("disabled", true).css("opacity", 0.6);
                ws = null;
            }

            // 连接错误
            ws.onerror = function(err){
                alert("连接聊天室失败，请检查地址或网络！");
                console.error("连接错误：", err);
            }
        });

        // 2. 发送消息（支持回车快捷发送）
        function sendMessage() {
            if (!ws || ws.readyState !== WebSocket.OPEN) {
                alert("请先加入聊天室！");
                $("#join").focus();
                return;
            }

            const message = messageInput.val().trim();
            const toId = $("#toId").val().trim();
            const userName = $("#userName").val().trim();
            const headImg = $("#headImg").val().trim();

            if (!message) {
                alert("请输入消息内容！");
                messageInput.focus();
                return;
            }

            // 封装消息格式
            const msgData = {
                id: Math.random().toString(36).substr(2, 9), // 生成唯一消息ID
                toId: toId || "all", // 空则群发
                fromId: userId,
                name: userName,
                headImg: headImg || "https://esan688.oss-cn-beijing.aliyuncs.com/avatars/%E8%B6%85%E7%AE%A1/1754565535365_%E6%A2%A6%E8%88%9F.jpg", // 默认头像
                msg: message,
                time: new Date().toLocaleString(),
                type: "send"
            };

            // 发送消息
            ws.send(JSON.stringify(msgData));
            // 自身消息显示
            textarea.append(`[${msgData.time}] 我：${message}\n`);
            textarea.scrollTop = textarea.scrollHeight;
            // 清空输入框
            messageInput.val("");
        }

        // 点击发送按钮
        $("#send").click(sendMessage);
        // 回车快捷发送
        messageInput.keyup(function(e){
            if (e.keyCode === 13) {
                sendMessage();
            }
        });

        // 3. 离开聊天室
        $("#out").click(function(){
            if (ws && ws.readyState === WebSocket.OPEN) {
                ws.close();
            } else if (ws) {
                ws = null;
                textarea.append(`[系统通知] ${new Date().toLocaleString()}：你已离开聊天室\n`);
                textarea.scrollTop = textarea.scrollHeight;
                $("#join").prop("disabled", false).css("opacity", 1);
                $("#out").prop("disabled", true).css("opacity", 0.6);
            }
        });

        // 初始化按钮状态
        $("#out").prop("disabled", true).css("opacity", 0.6);
    })
</script>
</body>
</html>
